<template>
  <div style="margin: 30px">
    <!-- Statistics -->
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card>
          <el-statistic :title="'老人总人数'" :value="elderCount"></el-statistic>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <el-statistic :title="'护工总人数'" :value="caregiverCount"></el-statistic>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <el-statistic :title="'管理员总人数'" :value="volunteerCount"></el-statistic>
        </el-card>
      </el-col>
    </el-row>

    <!-- Charts -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="12">
        <el-card>
          <div ref="ageDistributionChart" style="height: 400px;"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div ref="weeklyEventChart" style="height: 400px;"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { ref, onMounted } from 'vue';

export default {
  data() {
    return {
      elderCount: 15,
      caregiverCount: 4,
      volunteerCount: 3,
    };
  },
  setup() {
    const ageDistributionChart = ref(null);
    const weeklyEventChart = ref(null);

    onMounted(() => {
      // Age Distribution Chart
      const ageChart = echarts.init(ageDistributionChart.value);
      ageChart.setOption({
        title: {
          text: '老人年龄段分布',
        },
        tooltip: {
          trigger: 'item',
        },
        legend: {
          top: '5%',
          left: 'center',
        },
        series: [
          {
            name: '年龄段',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 10, name: '60-70岁' },
              { value: 20, name: '70-80岁' },
              { value: 30, name: '80-90岁' },
              { value: 5, name: '90岁以上' },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      });

      // Weekly Event Chart
      const eventChart = echarts.init(weeklyEventChart.value);
      eventChart.setOption({
        title: {
          text: '事件趋势',
        },
        tooltip: {
          trigger: 'axis',
        },
        xAxis: {
          type: 'category',
          data: ['2024-07-06', '2024-07-07', '2024-07-08', '2024-07-09'],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '事件数',
            type: 'line',
            data: [30, 60, 120, 0],
          },
        ],
      });
    });

    return {
      ageDistributionChart,
      weeklyEventChart,
    };
  },
};
</script>

<style scoped>
.el-card {
  border-radius: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>
